//login组件
<template>
    <p class="login">
        <el-tabs v-model="default_tab_name" @tab-click="handleClick">
            <el-tab-pane label="登录" name="login_tab">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="名称" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="pass">
                        <el-input type="password" v-model="ruleForm.pass" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="注册" name="register_tab">
                <register></register>
            </el-tab-pane>
        </el-tabs>
    </p>
</template>

<script>
    import register from '@/views/register'
    import axios from '../axios.js'
    export default {
        name: 'Login',
        data() {
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else if (value.length < 6) { //也可以min max指定
                    callback(new Error('密码长度至少6位'));
                } else {
                    if (this.ruleForm.checkPass !== '') { //login界面无确认密码 --这步无效
                        this.$refs.ruleForm.validateField('checkPass');
                    }
                    callback();
                }
            };
            return {
                default_tab_name: 'login_tab',//默认显示的tab name
                ruleForm: {
                    name: '',//用户名
                    pass: '',//密码
                    checkPass: '',//确认密码
                },
                rules: {
                    name: [ //通过prop值 找到对应input 调用规则
                        { required: true, message: '请输入您的名称', trigger: 'blur' },
                        { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                    ],
                    pass: [
                        { required: true, validator: validatePass, trigger: 'blur' }
                    ]
                },
            };
        },
        methods: {
            //选项卡切换
            handleClick(tab, event) {
            },
            //重置表单
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            //提交表单
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        // this.$message({
                        //     type: 'success',
                        //     message: '登录成功'
                        // });
                        //this.$router.push('/');//跳转到首页

                        axios.userLogin({ username: this.ruleForm.name, password: this.ruleForm.pass })
                            .then(( {data} ) => { // {data} 解构赋值 把返回大data里的小data解构出来
                            //解构出来后 data就直接是后台返回的接口数据，不用{}解构就需要通过data.data取
                                console.log(data);
                                //账号存在
                                if (data.err == 0) {
                                    this.$message({
                                        type: 'success',
                                        message: '登录成功'
                                    });
                                    //拿到返回的token和username，并存到store
                                     let token = data.data.jwt;
                                     let username = "yangbin";
                                    //Action 通过 store.dispatch 方法触发，UserLogin是actions中的方法
                                    //并将token做为参数传到actions中的UserLogin方法中
                                     this.$store.dispatch('UserLogin', token);
                                     this.$store.dispatch('UserName', username);
                                    // //跳到目标页
                                     this.$router.push('/');
                                }
                            });

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
        },
        components: { //子组件
            register // register:register 的简写 会在模板中找键为register的dom标签
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss">
    .login {
        width: 400px;
        margin: 0 auto;
    }

    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }

    .el-tabsitem {
        text-align: center;
        width: 60px;
    }
</style>